<template>
  <div class="info_config_page">
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="订单来源名称">
          <el-input
            v-model="searchForm.source_name"
            placeholder="请输入订单来源名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider></el-divider>

    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon
          style="margin-right: 15px"
          icon-class="list"
          :size="15"
        />数据列表
      </h5>
      <el-button
        v-if="$hasMethod('#add')"
        size="small"
        icon="el-icon-plus"
        class="add-btn"
        @click="addSources"
        >新增订单来源</el-button>
    </div>
    <el-table :data="tableData" border>
      <el-table-column align="center" label="ID" prop="id" width="100"/>
      <el-table-column align="center" label="订单来源名称" prop="source_name" />
      <el-table-column align="center" label="来源标识" prop="source_code" />
      <el-table-column label="状态" align="center" width="180">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status == 1 ? 'success' : 'danger'"
            >{{ scope.row.status == 1 ? "启用" : "禁用" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-if="$hasMethod('#edit')"
            size="mini"
            type="primary"
            @click="editItem(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="warning"
            v-if="$hasMethod('#enable')"
            @click="changeStatus(scope.row.id, scope.row.status)"
            >{{ scope.row.status == 1 ? "禁用" : "启用" }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <custom-page
      ref="customPage"
      :total="total"
      @getList="getList"
    ></custom-page>
    <add-sources
      ref="sourcesDlg"
      :handleDialog="handleDialog"
      :dialogTitle="dialogTitle"
      :isEdit="isEdit"
      :sourceForm="sourceForm"
      @submitForm="submitForm"
      @closeDialog="closeDialog"
    >
    </add-sources>
  </div>
</template>

<script>
import { sourceList, updateSource } from "@/api/info";
import customPage from "@/components/customPage";
import addSources from "../source/addSource"
export default {
  components: {customPage, addSources},
  data() {
    return {
      tableData: [],
      dialogTitle: '',
      handleDialog: false,
      isEdit: true,
      total: 0,
      searchForm:{
        source_name: '',
      },
      sourceForm:{
        source_name: '',
        source_code: '',
        status: 1,
      }
    };
  },
  methods: {
    search() {
      this.$refs.customPage.page = 1;
      this.getList();
    },
    // 重置
    reset() {
      this.searchForm = Object.assign({})
      this.getList();
    },
    addSources(){
      if (this.$refs.sourcesDlg.$refs.sourceForm) {
        this.$refs.sourcesDlg.$refs.sourceForm.resetFields();
      }
      this.dialogTitle = "新增订单来源";
      this.handleDialog = true;
      this.isEdit = true;
      this.sourceForm = {
        source_name: '',
        source_code: '',
        status: 1
      }
    },
    submitForm(){
      updateSource(this.sourceForm).then((res) => {
        this.handleDialog = false;
        this.getList();
      });
    },
    changeStatus(id, status) {
      let title = status == 1 ? '禁用' : '启用'
      this.$confirm("确认要修改状态吗?", title, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        updateSource({
          id,
          status: status == 1 ? 0 : 1,
        }).then((res) => {
          this.getList();
        });
      });
    },
    editItem(row) {
      if (this.$refs.sourcesDlg.$refs.sourceForm) {
        this.$refs.sourcesDlg.$refs.sourceForm.resetFields();
      }
      this.dialogTitle = "编辑";
      this.handleDialog = true;
      this.isEdit = false;
      let form = {...row}
      delete form.source_code
      delete form.status
      this.sourceForm = form;
    },
    closeDialog() {
      this.handleDialog = false;
    },
    // 获取列表
    getList() {
      const { page, pageSize } = this.$refs.customPage;
      sourceList({ 
        page, 
        pageSize,
        source_name: this.searchForm.source_name,
      }).then((res) => {
        this.tableData = res.data;
        this.total = res.total;
      });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
</style>
